<template>
  <view class="content">
    <view class="top flexc">
      <view class="score">{{ userStore.userInfo.integral }}</view>
      <view class="avaliable">可用积分</view>
      <segment
        class="segment"
        color="#FFEBC0"
        :segs="segs"
        v-model="segIndex"
      ></segment>
    </view>
    <scroll-view
      class="scroll-view"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
      :lower-threshold="20"
    >
      <view
        class="item flexr align-center"
        v-for="(item, index) in userStore.customerIntegrals"
        :key="index"
      >
        <view class="flexc flex-1 overflow-hidden">
          <view class="title-item">{{ item.title }}</view>
          <view>积分流水号: {{ item.order }}</view>
          <view class="time-item">{{ item.createTime }}</view>
        </view>
        <view class="score-item" :style="{color: item.color}"> {{ item.content }} </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
import { ref, watch } from "vue";
import { useUserStore } from "@/store/user.js";
const userStore = useUserStore();
import segment from "@/subpages/widgets/segment.vue";
const segs = ref(["积分明细", "积分规则", "积分商城"]);
const segIndex = ref(0);
onLoad(() => {
  userStore.getCustomerIntegralList(true);
});
function scrolltolower() {
  console.log("scrolltolower");
  userStore.getCustomerIntegralList(false);
}
watch(segIndex, (newVal) => {
  if (newVal == 1) {
    uni.navigateTo({
      url: "/subpages/my/integral_role",
    });
    segIndex.value = 0;
  } else if (newVal == 2) {
    // uni.navigateTo({
    // 	url:"/subpages/my/integral_mall",
    // })
    segIndex.value = 0;
    if (userStore.userInfo.mallStatus === 0) {
      uni.showToast({
        title: "商城未开通",
        icon: "none",
      });
      return;
    }
    uni.navigateToMiniProgram({
      appId: "wx0465e83083889561",
      path: `pages/index/index?scene=${userStore.userInfo.mallCustAccountCode}`,
      envVersion: "release",
      success(res) {
        console.log("打开成功", res);
      },
    });
  }
});
</script>

<style lang="scss">
.content {
  background-color: white;
  .top {
    height: 384rpx;
    background-color: black;
    padding: 32rpx;
    .score {
      font-size: 88rpx;
      color: #ffebc0;
      margin-top: 4rpx;
      align-self: center;
    }
    .avaliable {
      color: #ffebc0;
      align-self: center;
      margin-top: 5rpx;
    }
    .segment {
      margin-top: 67rpx;
    }
  }
  .scroll-view {
    flex: 1;
    overflow-y: scroll;
    padding: 32rpx;
    padding-top: 12rpx;
    box-sizing: border-box;
    .item {
      border-bottom: 2rpx solid $divider-color;
      padding-bottom: 20rpx;
      padding-top: 20rpx;
    }
    .title-item {
      font-size: 32rpx;
      margin-bottom: 10rpx;
    }
    .time-item {
      font-size: 24rpx;
      color: $text-color2;
    }
    .score-item {
      color: #e9a868;
      font-size: 48rpx;
      margin-top: 4rpx;
    }
  }
}
</style>
